import React from 'react';
import { Modal, Form, InputNumber, Select, Radio } from 'antd';
import { EditorSettings } from '@/types/editor';

interface EditorSettingsProps {
  visible: boolean;
  settings: EditorSettings;
  onClose: () => void;
  onSave: (settings: EditorSettings) => void;
}

const fontFamilies = [
  'Fira Code',
  'Consolas',
  'Monaco',
  'Source Code Pro',
  'Courier New',
];

const EditorSettingsModal: React.FC<EditorSettingsProps> = ({
  visible,
  settings,
  onClose,
  onSave,
}) => {
  const [form] = Form.useForm();

  const handleOk = () => {
    form.validateFields().then((values) => {
      onSave(values);
      onClose();
    });
  };

  return (
    <Modal
      title="编辑器设置"
      open={visible}
      onOk={handleOk}
      onCancel={onClose}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={settings}
      >
        <Form.Item
          name="fontSize"
          label="字体大小"
          rules={[{ required: true }]}
        >
          <InputNumber min={12} max={24} />
        </Form.Item>

        <Form.Item
          name="fontFamily"
          label="字体"
          rules={[{ required: true }]}
        >
          <Select>
            {fontFamilies.map(font => (
              <Select.Option key={font} value={font}>
                {font}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="theme"
          label="主题"
          rules={[{ required: true }]}
        >
          <Radio.Group>
            <Radio.Button value="light">浅色</Radio.Button>
            <Radio.Button value="dark">深色</Radio.Button>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          name="tabSize"
          label="缩进大小"
          rules={[{ required: true }]}
        >
          <InputNumber min={2} max={8} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditorSettingsModal; 